<template>
	<div class="default-main">

		<cus-form-title icon="el-icon-PictureFilled" label="搜索"/>
		<el-form class="cus-form" label-width="auto">
			<el-form-item label="图标名称">
				<el-input ref="iconNameInputRef" v-model="iconNameLike" clearable placeholder="模糊搜索" style="width: 25%"/>
			</el-form-item>
		</el-form>

		<cus-table-title icon="el-icon-PictureFilled" label="图标集合" style="margin-top: 50px"/>

		<div class="icon-item">
			<div class="icon-title">
				Element Plus 图标
			</div>
			<ul class="icon-list">
				<li v-for="iconName in renderElementIcons" class="li-item">
					<div class="li-item-inner suspension" @contextmenu.prevent="onContextmenu(iconName, $event)">
						<icon :name="iconName" class="suspension" size="2rem" style="margin: 10px"
						      @click="copy(getIconCode(iconName))"/>
						<div class="icon-name suspension" @click="copy(iconName)">{{ iconName }}</div>
					</div>
				</li>
			</ul>
		</div>

		<div class="icon-item">
			<div class="icon-title">
				Awesome 图标
			</div>
			<ul class="icon-list">
				<li v-for="iconName in renderAweIcons" class="li-item">
					<div class="li-item-inner suspension" @contextmenu.prevent="onContextmenu(iconName, $event)">
						<icon :name="iconName" class="suspension" size="2rem" style="margin: 10px"
						      @click="copy(getIconCode(iconName))"/>
						<div class="icon-name suspension" @click="copy(iconName)">{{ iconName }}</div>
					</div>
				</li>
			</ul>
		</div>

		<div class="icon-item">
			<div class="icon-title">
				阿里 IconFont 图标
			</div>
			<ul class="icon-list">
				<li v-for="iconName in renderIconFontIcons" class="li-item">
					<div class="li-item-inner suspension" @contextmenu.prevent="onContextmenu(iconName, $event)">
						<icon :name="iconName" class="suspension" size="2rem" style="margin: 10px"
						      @click="copy(getIconCode(iconName))"/>
						<div class="icon-name suspension" @click="copy(iconName)">{{ iconName }}</div>
					</div>
				</li>
			</ul>
		</div>

		<div class="icon-item">
			<div class="icon-title">
				本地图标
			</div>
			<ul class="icon-list">
				<li v-for="iconName in renderLocalIcons" class="li-item">
					<div class="li-item-inner suspension" @contextmenu.prevent="onContextmenu(iconName, $event)">
						<icon :name="iconName" class="suspension" size="2rem" style="margin: 10px"
						      @click="copy(getIconCode(iconName))"/>
						<div class="icon-name suspension" @click="copy(iconName)">{{ iconName }}</div>
					</div>
				</li>
			</ul>
		</div>

		<context-menu ref="contextmenuRef" :items="contextmenuItems" @contextmenuItemClick="contextmenuItemClick"/>

	</div>
</template>

<script lang="ts" name="IconCollection" setup>

import {messageError, messageSuccess} from '@/utils/commonUtil'
import {getAwesomeIconfontNames, getElementPlusIconfontNames, getIconfontNames, getLocalIconfontNames} from '@/utils/iconUtil'
import ContextMenu from '@/components/contextmenu/index.vue'
import {onActivated, onMounted, ref, watch} from 'vue'
import type {ContextMenuItem, ContextmenuItemClickEmitArg} from '@/components/contextmenu/interface'
import useClipboard from 'vue-clipboard3'
import type {InputInstance} from 'element-plus'
import Icon from '@/components/icon.vue'
import CusTableTitle from '@/components/cus-table-title.vue'
import CusFormTitle from '@/components/cus-form-title.vue'

const {toClipboard} = useClipboard()

const iconNameInputRef = ref<InputInstance>()
const iconNameLike = ref<string>()
const elementIconsAll = ref<string[]>([])
const aweIconsAll = ref<string[]>([])
const iconFontIconsAll = ref<string[]>([])
const localIconsAll = ref<string[]>([])
const contextmenuRef = ref()
const contextmenuItems = ref<ContextMenuItem[]>([
	{name: 'copyName', label: '复制图标名称', icon: 'el-icon-CopyDocument'},
	{name: 'copyAll', label: '复制完整代码', icon: 'fa fa-code'}
])

const renderElementIcons = ref<string[]>([])
const renderAweIcons = ref<string[]>([])
const renderIconFontIcons = ref<string[]>([])
const renderLocalIcons = ref<string[]>([])

const filterIconNames = (iconNames: string[]) => {
	if (!iconNameLike.value) {
		return iconNames
	}
	const searchValue = iconNameLike.value!.trim().toLowerCase()
	return iconNames.filter((iconName: string) => iconName.toLowerCase().indexOf(searchValue) !== -1)
}

watch(iconNameLike, () => {
	renderElementIcons.value = filterIconNames(elementIconsAll.value)
	renderAweIcons.value = filterIconNames(aweIconsAll.value)
	renderIconFontIcons.value = filterIconNames(iconFontIconsAll.value)
	renderLocalIcons.value = filterIconNames(localIconsAll.value)
})

const onContextmenu = (iconName: string, el: MouseEvent) => {
	contextmenuRef.value.onShowContextmenu(iconName, {
		x: el.x,
		y: el.y
	})
}

const getIconCode = (iconName: string) => {
	return `<icon name="${iconName}"/>`
}

const copy = (str: string) => {
	toClipboard(str!).then(() => {
		messageSuccess('已复制：' + str)
	}).catch(() => {
		messageError('复制失败，浏览器不支持')
	})
}

const contextmenuItemClick = (item: ContextmenuItemClickEmitArg<string>) => {
	const {name, data: iconName} = item
	switch (name) {
			// 复制图标名称
		case 'copyName':
			copy(iconName!)
			break
			// 复制完整代码
		case 'copyAll':
			copy(getIconCode(iconName!))
			break
		default:
			messageError('上下文菜单操作类型无效')
			break
	}
}

getElementPlusIconfontNames().then((res: string[]) => {
	elementIconsAll.value = res
	renderElementIcons.value = elementIconsAll.value
})
getAwesomeIconfontNames().then((res: string[]) => {
	aweIconsAll.value = res.map((name) => `fa ${name}`)
	renderAweIcons.value = aweIconsAll.value
})
getIconfontNames().then((res: string[]) => {
	iconFontIconsAll.value = res.map((name) => `iconfont ${name}`)
	renderIconFontIcons.value = iconFontIconsAll.value
})
getLocalIconfontNames().then((res: string[]) => {
	localIconsAll.value = res
	renderLocalIcons.value = localIconsAll.value
})

// 页面缓存后，onMounted只会执行一次，再次激活会执行onActivated
onMounted(() => {
	iconNameInputRef.value?.focus()
})

onActivated(() => {
	iconNameInputRef.value?.focus()
})

</script>

<style lang="scss" scoped>

.icon-item {
	margin-top: 24px;
	width: calc(100% - 65px);
}

.icon-title {
	font-size: var(--el-font-size-medium);
	font-weight: 400;
	line-height: 2rem;
}

.icon-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	list-style: none;
	overflow: hidden;
	padding: 0 !important;

	.li-item {
		border: 1px solid var(--el-border-color);
		color: var(--el-text-color-regular);
		font-size: var(--el-font-size-base);
		height: 100px;
		text-align: center;
		transition: background-color var(--el-transition-duration);

		.li-item-inner {
			align-items: center;
			cursor: pointer;
			display: flex;
			flex-direction: column;
			height: 100%;
			justify-content: center;
		}
	}
}

</style>
